<template>
        <div >
          <el-carousel indicator-position="outside" height="600px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3>校园展示{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div style="display: flex">
          <div class="min">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>公告栏</span>
                </div>
              </template>
              <h1>旺铺招租！旺铺招租！</h1>
            </el-card>
          </div>

          <div class="min">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>时间表</span>
                </div>
              </template>
              <div class="scrollbar-demo-item" style="height: 326.1px">
                <el-scrollbar height="326.1px">
                  <el-timeline>
                    <el-timeline-item timestamp="上午 09:00" placement="top">
                      <el-card>
                        <h4>第一节课</h4>
                        <p>上至--上午09:40</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="上午 10:00" placement="top">
                      <el-card>
                        <h4>第二节课</h4>
                        <p>上至--上午10:40</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="下午 15:00" placement="top">
                      <el-card>
                        <h4>第三节课</h4>
                        <p>上至--下午15:40</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="下午 16:00" placement="top">
                      <el-card>
                        <h4>第四节课</h4>
                        <p>上至--下午16:40</p>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                </el-scrollbar>
              </div>
            </el-card>
          </div>

          <div class="min">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>快乐校园生活</span>
                </div>
              </template>
              <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3>校园生活{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </el-card>
          </div>
        </div>

        <el-tabs type="border-card" style="height: 300px; margin-top: 10px">
          <el-tab-pane label="校园简介">
            <h1>校园简介</h1>
          </el-tab-pane>
          <el-tab-pane label="师资介绍">
            <h1>不用看 全都是人才！</h1>
          </el-tab-pane>
          <el-tab-pane label="校训校风">
            <h1>富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善</h1>
          </el-tab-pane>
        </el-tabs>

</template>

<script>

import Foot from "@/components/Foot";
export default {
  name: 'Main',
  components: {
    Foot
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 480px;
}
.min {
  margin-left: 30px;
}

</style>
